<template>
  <div class="wrapper">
    <div class="title">我的全部购物车（2）</div>
    <div class="card"  v-for="item in list" :key="item.id">
      <span class="cardTitle">{{item.cardTitle}}</span>
      <div class="cardwrap" v-for="(thing,index) in item.item" :key="index" v-show="index<2 || thing.show">
        <div class="cardGoods" >
          <div class="cardImg">
            <img :src="thing.cardImg" class="img">
          </div>
          <div class="cardContent">
            <span class="goodsName">{{thing.goodsName}}</span>
            <div class="price">
              <span class="price1">￥{{thing.price1}}*{{thing.nums}}</span>
              <span class="price2">￥{{thing.price2}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="total" v-if="item.item.length>2" @click="show(item)">
          <span>共计{{item.nums}}件/{{item.kg}}kg</span>
          <img src="../assets/下拉.png">
        </div>
    </div>
  </div>
</template>

<script>
   export default{
    data(){
      return {
        list:[{
          id:'1',
          cardTitle:'沃尔玛',
          nums:3,
          kg:1.4,
          item:[{
            goodsName:'番茄',
            cardImg:[require('../assets/tamato.jpeg')],
            price1:33.3,
            nums:3,
            price2:99.9,
          },{
            goodsName:'茄子',
            cardImg:[require('../assets/eggplant.jpeg')],
            price1:33.3,
            nums:3,
            price2:99.9,
          },{
            goodsName:'薯片',
            cardImg:[require('../assets/patato chips.jpeg')],
            price1:33.3,
            nums:3,
            price2:99.9,
          }],
          
        },{id:'2',
          cardTitle:'福泰隆',
          nums:2,
          kg:1.4,
          item:[{
            goodsName:'小龙虾',
            cardImg:[require('../assets/crayfish.jpeg')],
            price1:2,
            nums:3,
            price2:6
          },{
            goodsName:'茄子',
            cardImg:[require('../assets/eggplant.jpeg')],
            price1:2,
            nums:3,
            price2:6
          }],
        }
        ]
      }
    },
    methods:{
      show(item){
        item.item.forEach(item=>{
          item.show=!item.show;
        })
      }
    }
   }
</script>

<style lang="scss" scoped>
  .wrapper{
    min-height:100vh;
    background-color:#f1f1ee;
    width:100vw;
  }
  .title{
    padding: 3vw;
    font-size: 6.5vw;
    font-weight: 350;
    background:white;
    text-align:center;
    margin-bottom: 3vw;
  }
  .card{
    background: white;
    width: 84vw;
    margin: 0 auto;
    border-radius: 1.5vw;
    padding: 4vw;
    margin-bottom: 3vw;
    .cardTitle{
      font-size:5vw;
    }
    .cardwrap{
      display:flex;
      flex-direction:column;
    }
    .cardGoods{
      display:flex;
      justify-content:space-between;
      margin-top: 3vw;
      .cardImg{ 
        .img{
          width:15vw;
          height:15vw;
        }
      }
      .cardContent{
        display:flex;
        flex-direction:column;
        width: 65vw;
        .goodsName{
          font-size:4.5vw;
        }
        .price{
          font-size:4vw;
          margin-top: 3vw;
          display:flex;
          justify-content:space-between;
          .price1{
            color:red;
          }
          
        }
      }
    }
    .total{
          display: flex;
          width: 84vw;
          height: 7vw;
          background-color: #f5f5f4;
          justify-content: center;
          margin: 0 auto;
          border-radius: 1.5vw;
          margin-top: 2vw;
          line-height: 7vw;
      img{
          width: 5vw;
          height: 5vw;
          margin-top: 1.5vw;
          margin-left: 1vw;
      }
      span{
        color:#cdcdcd;
      }
    }
  }
</style>